<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>最新商品</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <style>
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }
        .New-shoots .bd-0 li{
            display: inline-block;
            width: 33.3333%;
            text-align: center;
            margin-right: 0;
        }
        /*.New-shoots .hd a{*/
            /*flex: 0.5;*/
        /*}*/
        .tab-hea{
            display: -webkit-box;
            overflow: scroll;
            line-height: .44rem;
        }
        .tab-heas{
            padding:0 .1rem ;
            display: block;
        }
        .hahss{
            border-bottom: solid 1px #5F3104;
            color: #5F3104;
        }
        .New-shoots .bd-0>div{
            position: static;
        }
        .New-shoots .bd-0>div:after{
            bottom: 0;
            display: none;
        }
        .New-shoots .bd-0>div:after{
            content: '';
        }
        .hd{
       	 	box-sizing: border-box;
        		display:flex;
        		flex-direction: row;
        		flex-wrap: wrap;
        		justify-content: initial!important;
        		align-items: initial!important;
        		height:auto!important;
        		padding: 0 0.1rem!important
        }
        .second_box{
        		display:flex;
        		justify-content: center;
        		align-items: center;
        		/*width:20%;*/
        		padding:0 0.1rem;
        		color:#333;
        }
        .overflow{
			display: flex;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
        }
		.New-shoots .bd-0 li img {
			display:inline-block;
		    width: 1rem;
		    height: 1rem;
		}
    </style>
</head>

<body>
    <div class="New-shoots bc-gray">
        <div class="tab-hea">
            <a class="tab-heas" :class="{hahss:$index === firstNum }" v-for="item in list" @click='load(this)'>
                {{ item.firstTypeDiscribe }}
            </a>
        </div>
        <div class="hd  tab-hea ">
            <a class="second_box overflow" :class="{hahss:$index===indnum}" v-for="item in list2" @click='load2(this)'>{{ item.secondTypeDiscibe }}</a>
        </div>
        <div class="bd">
            <div v-if="store.length == 0" style="margin-top: 20px;text-align: center">
                暂无数据
            </div>
            <div v-else>
                <div class="bd-1 bd-0 active">
                    <div v-for='items in store'>
<!--                        <div style="position: relative;">
                            <img :src="items.produce_head_image" style="width: 100%;height: 43vw;display: block">
                        </div>-->
                        <ul class="clearfix" style="height: auto;overflow: hidden;padding: 10px 0;box-sizing: border-box;text-align: center;background: #fff;">
                            <li v-for='item in items.produce' @click="next(item.produceId)">
                                <img :src="item.produceHeadImage.split(',')[0]" alt="">
                                <h6>{{item.produceTitle}}</h6>
                                <p><span>首发价</span><em>￥ <font @click='console(item)'>{{item.auctionSet.startingPrice}}</font>起</em></p>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>
    <script>
        $(function () {
            new Vue({
                el: 'body',
                data: {
                    id: '',
                    store:'',
                    haha:0,
                    dataList:[],//全部数据的数组
                    list:[],
                    list2:[],
                    num:0,
                    indnum:0,//二级分类选项
                    firstNum:0,//一级分类选项
                },
                ready: function () {
                    var vm = this;

                    vm.$http.get(base_url+'ZITAOHUI/produceType', {
                        params: {
                            // secondeTypeId:1
                        }
                    }).then(
                        function (response) {
/*                            var all_data = response.data.extend;
                            console.log(response)
                            var list = all_data.list;
                            var id = list[0].secondTypeId;
                            vm.$set('id', id);
                            vm.$set('list', list);
                            console.log(vm.id)*/
							vm.$set('list',response.body.extend.list.一级标题);//一级菜单
							vm.$set('list2',response.body.extend.list.一级标题[0].lpst);//二级菜单
							vm.$set('dataList',response.body.extend.list.一级标题);//全部
							
                        },
                        function (response) {
                            console.log(response)
                        }
                    );
                    setTimeout(function () {
                         vm.sendAjax(vm.dataList[0].lpst[0].secondTypeId);//选中一级菜单，默认选中二级菜单中的第一个
                         $('.tab-hea a').click(function () {
                            var index = $(this).index();
                            $(this).addClass('hahss').siblings().removeClass('hahss');
                            $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
                         })
                    }, 100);
                },
                methods: {
                    next(id){
                        window.location.href = "http://www.yunnantese.com/page/buy-info-page.3.html?p_id="+id+"&time="+new Date().getTime();
                    },
                    load:function(t){
                    		this.list2 = this.dataList[t.$index].lpst;
                    		this.firstNum = t.$index;
                    		this.indnum = 0;
                    		this.sendAjax(this.dataList[t.$index].lpst[0].secondTypeId);//选中一级菜单，默认选中二级菜单中的第一个
                    },
                    load2: function (t) {
                    		this.indnum = t.$index;
						this.sendAjax(t.item.secondTypeId)
                     },
                     sendAjax:function(num){
                         this.$http.get(base_url+'ZITAOHUI/latesAuction', {
                            params: {
                                secondeTypeId: num
                            }
                         }).then(
                            function (response) {
                                console.log(response);
                                var all_data = response.data.extend;
                                var store = (all_data.list);
                                this.$set('store', store)
                            },
                            function (response) {
                                console.log(response)
                            }
                         )
                     },
                     preLoad: function () {
                        this.$http.get(base_url+'ZITAOHUI/latesAuction', {
                            params: {
                                secondeTypeId: this.id
                                // secondeTypeId: 3
                            }
                        }).then(
                            function (response) {
                                var all_data = response.data.extend;
                                var store = all_data.list;
                                this.$set('store', store);


                            },
                            function (response) {
                            	
                            }
                        )
                    }
                }

            })
        })
        $(function (){
       /*     $('.tab-hea .tab-heas').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass(
                    'active');
                $('.bd-0').eq(index).addClass('active').siblings().removeClass(
                    'active');
            })*/
        })
    </script>
</body>

</html>